<!--
 * @Description: 使用 https://www.swiper.com.cn/demo/index.html#virtual-slides
 * API: https://www.swiper.com.cn/api/virtual/374.html
  * vue 使用: https://swiperjs.com/vue
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-02-07 10:07:39
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-05-29 13:41:47
-->
<template>
  <div class="prizeSwipe">
    <ClientOnly>
      <!-- @swiper="onSwiper" -->
      <swiper
        id="prizeSwipe"
        :modules="[Virtual, Manipulation]"
        virtual
        :slides-per-view="1"
        space-between="0"
        :initial-slide="998"
        :touch-ratio="0.36"
        :centered-slides="true"
        @init="initSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide
          v-for="(slideContent, index) in slides"
          :key="index"
          :virtualIndex="index"
        >
          <div class="prize-swipe-item items-center">
            <img
              class="prize-swipe-item-icon"
              :src="source.prizeIcons[index % 5]"
            />
          </div>
        </swiper-slide>
      </swiper>
    </ClientOnly>
  </div>
</template>
<script setup lang="ts" name="prizeSwipe">
// yarn add  swiper
import { Swiper, SwiperSlide } from "swiper/vue";
import { Virtual, Manipulation } from "swiper/modules";
import "swiper/scss";
import "swiper/css";

const props = withDefaults(
  defineProps<{
    centerindex?: number;
  }>(),
  {
    centerindex: 0,
  }
);

const emit = defineEmits(["initDone", "update:centerindex", "change"]);

const slides = Array.from({ length: 2000 }).map((el, index) => index);

const prefixImg = process.env.NODE_ENV != "development" ? "/fx" : "";
const source = reactive({
  curPrize: 4997,
  prizeIcons: [
    `${prefixImg}/image/lottery/prize-icon10.png`,
    `${prefixImg}/image/lottery/prize-icon30.png`,
    `${prefixImg}/image/lottery/prize-icon50.png`, // 5%
    `${prefixImg}/image/lottery/prize-icon1.png`, // 0.1%
    `${prefixImg}/image/lottery/prize-icon5.png`,
  ],
});

// const onSwiper = (swiper: any) => {
//   console.log("Prize onSwiper 加载完成!");
//   // console.log(swiper);
// };

// swiper 滚动改变
const onSlideChange = (val: any) => {
  // console.log("slide change", val.activeIndex);
  emit("change", val.activeIndex);
};

// 初始化完成
const initSwiper = (val: any) => {
  console.log("Prize swiper 初始化完成!");
  emit("initDone", val);
  // emit("initDone", val);
};
</script>
<style lang="scss">
.prizeSwipe {
  .swiper-slide {
    position: relative;
    width: 100% !important;
  }
  .prize {
    &-swipe {
      &-item {
        position: relative;
        top: 8px;
        transform: scale(1) !important;
        height: 130 * 2px !important;
        justify-content: center !important;
        display: flex !important;

        &-icon {
          width: 130 * 2px;
          height: 130 * 2px;
          scale: 0.95;
        }
        &-start {
          @keyframes shakeimg {
            0% {
              transform: rotateZ(0deg);
            }
            25% {
              transform: rotateZ(15deg);
            }
            50% {
              transform: rotateZ(-15deg);
            }
            75% {
              transform: rotateZ(15deg);
            }
            100% {
              transform: rotateZ(0deg);
            }
          }
          animation: shakeimg 0.4s ease-in-out 4;
        }
      }
    }
  }
}
</style>
